<template>
	<view class="explain-record-item flex--col">
		  <view class="explain-record-address flex--row text--thirdary-dark">
			<image aria-label="当前记录地址" src="@/static/magic/address.svg" class="icon--middle"></image>
			<text>{{record.address}}</text>
		  </view>
		  <view class="explain-record-content flex--col" @click.stop="unfold = !unfold" role="button" :aria-expanded="unfold" >
			  <view class="explain-record-image">
				 <image aria-label="当前记录图片" :src="record.img" mode="aspectFill" class="image-max-width">
			  </view>
			  <view class="explain-record-desc flex--col">
				<view class="desc-main text--secondary-dark" :class="{'active':unfold}">
					{{record.content}}
				</view>
				<view class="text--thirdary-dark">{{record.recordTime}}</view>
			  </view>
		  </view>
	</view>
</template>

<script>
	export default{
		props:['record'],
		data(){
			return {
				unfold:false
			}
		}
	}
</script>

<style lang="scss" scoped>
	.text--main-dark{
		font-size: 24px;
		font-weight: 700;
		color:#333;
	}
	
	.text--secondary-dark{
		font-size: 16px;
		font-weight: 600;
		color:#333;
	}
	
	.text--thirdary-dark{
		font-size: 14px;
		font-weight: 100;
		color:#666;
	}
	
	
	.explain-record-item{
		height:auto;
	
	}
	
	.explain-record-address{
		align-items: center;
	}
	
	.explain-record-content{
		height: 90%;
		@include border-four-roundings;
		border-radius: 4px;
		overflow: hidden;
	
		.explain-record-image{
			height: 20vh;
			
			image{
				width:100%;
			}
		}
		
		.explain-record-desc{
			// height: 40%;
			gap:6px;
			padding:16px 8px;
			justify-content: space-between;
			
			.desc-main{
				white-space: break-spaces;
				overflow: hidden;
				
				transition:all 1s;
				max-height:20px;
				
				&.active{
					white-space: break-spaces;
					max-height: 200px;
					overflow: scroll;
				}
				
			}
			
		}
	}
</style>